Day 22 - 變數與計算函數

18th鐵人賽 day 22 css html 桂花紫蘇炸雞

饅頭

團隊第二屆技術創作市集

2026-09-10 12:17:58

80 瀏覽

分享至

在設定 CSS 樣式時，我們常需要重複使用相同的顏色、數值，或處理數值間的相對關係。

CSS 提供了計算函數和變數功能，讓樣式設定更加靈活且易於維護。

Calc() 計算函數

calc() 函數允許在 CSS 中進行數學運算，支援加減乘除，並且能夠處理不同單位數值之間的運算。

/* 基本語法 */
width: calc(運算式);

/* 混合單位運算 */
.box {
  width: calc(100% - 80px);        /* 百分比減去固定值 */
  height: calc(100vh - 60px);      /* 視窗高度減去導航列 */
  padding: calc(1rem + 5px);       /* 相對單位加上固定值 */
}

運算規則

加法和減法：運算符前後必須有空格

width: calc(100% - 20px);     /* 正確 */
width: calc(100%-20px);       /* 錯誤:缺少空格 */
width: calc(50% + 30px);      /* 正確 */

乘法和除法：至少一個數值必須是數字

width: calc(100% / 3);         /* 正確 */
width: calc(2 * 50px);         /* 正確 */
width: calc(100% * 2);         /* 正確 */
font-size: calc(16px * 1.5);   /* 正確 */

使用範例

頁面內容最小高度：全螢幕高度減去固定的導航列高度

.content {
  /* 視窗高度減去 60px 導航列 */
  min-height: calc(100vh - 60px);
}

響應式間距：滿版寬度減去兩側間距後，再水平置中

.container {
  width: calc(100% - 40px);
 /* 兩側各留 20px 間距 */
  margin: 0 auto;
           /* 水平置中 */
}

動態字體大小：字體大小使用視窗寬度來微調

h1 {
  font-size: calc(1.5rem + 2vw);
  /* 基礎大小 + 視窗寬度的 2% */
}

變數定義與使用

CSS 變數讓我們可以定義可重複使用的值，提高程式碼的可維護性。

定義變數

定義變數時，名稱必須以兩個連字符（--）開頭。一般會習慣將全域變數設定在 :root 偽類當中，:root 代表文件的根元素（即 <html>），是定義全域變數的最佳位置：

/* 定義變數 */
:root {
  --primary-color: #007bff;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}

/* 使用變數 */
.button {
  background-color: var(--primary-color);
  font-size: var(--font-size-base);
  padding: var(--spacing-unit);
}

使用變數

變數可透過 var() 函數來引用，並且能設定備用值。

/* 基本使用 */
.element {
  color: var(--primary-color);
}

/* 設定備用值 */
.element {
  color: var(--primary-color, #007bff);
    /* 如果 --primary-color 未定義，使用 #007bff */
}

/* 嵌套變數 */
:root {
  --base-color: #007bff;
  --light-color: var(--base-color);
}

變數也可以在 calc() 函數中使用變數進行計算。

.box {
  padding: calc(var(--spacing-unit) * 2);
  width: calc(100% - var(--sidebar-width));
}

變數作用範圍

變數具有作用域，子元素會繼承父元素的變數值。
1. 變數層級繼承的特性：設定一個全域變數 --text-color 為黑色，將文字 p 使用 --text-color 變數設為文字顏色，當容器 .box 將 --text-color 設定為白色，那麼在 .box 內部的 p 因為有使用 --text-color 因此變為白色，而在 .box 外部的 p 則還是維持黑色。
2. 不同按鈕顏色設定：將按鈕基礎的樣式 .btn 設定好後，將按鈕顏色使用 --btn-color 變數進行管理，其他顏色的按鈕，就可以只需修改 --btn-color 變數就可以修改顏色。其中，變數也可以互相引用，例如可以將 --btn-color 套用上 --primary-color 變數的值。

配合行內樣式使用

CSS 變數也能應用於行內樣式中，可以直接設定特定元素的變數值，實現共用樣式但呈現不同效果的設計。

設定不同的顏色區塊：在行內樣式中，修改顏色變數，可以製作一個方便換顏色的區塊。

<div class="box" style="--box-color: blue;">
  藍色區塊
</div>
<div class="box" style="--box-color: red;">
  紅色區塊
</div>

.box {
  width: 200px;
  text-align: center;
  color: #fff;
  background-color: var(--box-color);
}

進度條：在行內樣式中，修改寬度變數，可以控制進度顯示的百分比。

<!-- 進度 0% -->
<div class="progress" style="--bar-width: 0%">
  <div class="progress-bar"></div>
</div>
<!-- 進度 80% -->
<div class="progress" style="--bar-width: 80%">
  <div class="progress-bar"></div>
</div>
<!-- 進度 100% -->
<div class="progress" style="--bar-width: 100%">
  <div class="progress-bar"></div>
</div>

:root {
  --bar-width: 0%;
}
.progress {
  width: 200px;
  height: 20px;
  border: 1px solid #000;
  .progress-bar {
    height: 100%;
    width: var(--bar-width);
    background: #99c794;
  }
}

動態變數修改

變數可以透過 JavaScript 動態修改，實現主題切換等功能：

:root {
  --theme-color: #007bff;
}
.button {
  background: var(--theme-color);
}

// 修改變數值
document.documentElement.style.setProperty('--theme-color', '#dc3545');

// 讀取變數值
const themeColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--theme-color');